<template>
    <div class="devContainer">
        <div class="chatLeft">
            <el-scrollbar height="100%" :native=true>
                <h1>后端任务进度<span style="font-size: 14px;">(您的ip:{{ ip }})</span></h1>
                <div v-show="todoList.length == 0">暂无后端任务</div>
                <el-row v-for="todo in todoList" :key="todo">
                    <el-col :span="17">
                        <div style="border: 1px solid green;border-radius: 20px;text-align: left;padding-left: 15px;">
                            <el-row>
                                <el-col :span="2">标题:</el-col>
                                <el-col :span="15">{{ todo.title }}</el-col>
                            </el-row>
                            <el-row v-show="todo.detail.length != 0">
                                <el-divider />
                                <el-col :span="2">详情:</el-col>
                                <el-col :span="15" v-html="todo.detail.replaceAll('\n', '<br/>')"></el-col>
                            </el-row>
                            <el-row v-show="todo.inParam.length != 0">
                                <el-divider />
                                <el-col :span="2">入参:</el-col>
                                <el-col :span="15">{{ todo.inParam }}</el-col>
                            </el-row>
                            <el-row v-show="todo.outParam.length != 0">
                                <el-divider />
                                <el-col :span="2">出参:</el-col>
                                <el-col :span="15">{{ todo.outParam }}</el-col>
                            </el-row>
                            <el-row>
                                <el-divider />
                                <el-col :span="2">截图:</el-col>
                                <el-col :span="15">
                                    <img :src="todo.arr[0]" alt="">
                                    <!-- <el-image style="width: 100px; height: 100px" :src="todo.arr[0]" :preview-src-list="todo.arr">
                                    </el-image> -->
                                </el-col>
                            </el-row>
                        </div>
                    </el-col>
                    <el-col :span="4">
                        <el-button type="primary" @click="done(todo.id)"
                            v-show="(ip == '192.168.31.85') && (todo.status == '0')">完成</el-button>
                        <el-button type="primary" @click="confirmDone(todo.id)"
                            v-show="(ip == otherIp) && (todo.status == '1')">确认完成</el-button>
                        <el-button type="danger" @click="deleteTodo(todo.id)">删除</el-button>
                    </el-col>
                    <el-col :span="3">
                        <sapn v-show="todo.status == '0'">进行中</sapn>
                        <sapn v-show="todo.status == '1'">已完成待确认</sapn>
                        <sapn v-show="todo.status == '2'">已结束</sapn>
                    </el-col>
                    <el-divider />
                </el-row>
            </el-scrollbar>
        </div>

        <div class="chatRight">
            <el-scrollbar height="100%" :native=true>
                <h1>添加后端任务</h1>
                <el-row>
                    <el-col :span="3"><el-text class="mx-1" type="primary">标题<span
                                style="color: red;">(必填)</span></el-text></el-col>
                    <el-col :span="8">
                        <el-input v-model="title" style="width: 500px" size="large" />
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="3"><el-text class="mx-1" type="primary">详情</el-text></el-col>
                    <el-col :span="8">
                        <el-input v-model="detail" :rows="9" style="width: 500px" size="large" type="textarea" />
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="3"><el-text class="mx-1" type="primary">入参</el-text></el-col>
                    <el-col :span="8">
                        <el-input v-model="inParam" :rows="8" style="width: 500px" size="large" type="textarea" />
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="3"><el-text class="mx-1" type="primary">出参</el-text></el-col>
                    <el-col :span="8">
                        <el-input v-model="outParam" :rows="8" style="width: 500px" size="large" type="textarea" />
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="3"><el-text class="mx-1" type="primary">截图</el-text></el-col>
                    <el-col :span="16">
                        <previewDom ref="previewDom" />
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="24" style="text-align: center;">
                        <el-button type="primary" size="large" @click="send">发送</el-button>
                    </el-col>
                </el-row>
            </el-scrollbar>
        </div>
    </div>
</template>

<script>
import 'element-plus/dist/index.css';
import { resolveWsMessage } from '@/js/devchat'
import emitter from '@/js/mitt'
import { showNormal } from '@/js/common'
import request from '@/js/request'
import previewDom from '@/components/previewDom.vue'
export default {
    name: 'App',
    components: {
        previewDom
    },
    data() {
        return {
            otherIp: '192.168.31.73',
            ip: '',
            title: '',
            detail: '',
            inParam: '',
            outParam: '',
            todoList: []
        }
    },
    // watch: {
    //     todoList:{
    //         handler(val,newval){
    //             console.log(val,newval);
    //         },
    //         deep:true,
    //     }
    // },
    created() {
        emitter.on('dealMsg', this.dealMsg)
    },
    beforeUnmount() {
        emitter.off('dealMsg', this.dealMsg)
    },
    mounted() {
        let ws = new WebSocket("ws://192.168.31.85:333/devchat/ws");
        ws.onopen = function (e) {
            console.log("ws已连接");
        };
        ws.onmessage = function (event) {
            resolveWsMessage(JSON.parse(event.data));
        };
        ws.onerror = function (error) {

        };
        ws.onclose = function () {
            console.log("ws已关闭");
        };
    },
    methods: {
        dealMsg(msg) {
            if (msg.flag == 'global_session_id') {
                let ipAll = msg.content.ip
                this.ip = ipAll.substr(0, ipAll.indexOf(":"));
            } else {
                this.todoList = msg.content.todoList;
            }
        },
        send() {
            let arr = []
            let blob = this.$refs.previewDom.imageList
            for (let item in blob) {
                const reader = new FileReader();
                reader.readAsDataURL(blob[item]);
                reader.onload = function (e) {
                    let item = e.target.result
                    arr.push(item)
                };
            }
            setTimeout(() => {
                console.log(arr,'arrr');
                if (this.title == '') {
                    showNormal('标题不能为空');
                } else {
                    let title = this.title;
                    let detail = this.detail;
                    let inParam = this.inParam;
                    let outParam = this.outParam;
                    this.title = '';
                    this.detail = '';
                    this.inParam = '';
                    this.outParam = '';
                    request.post('/send', {
                        title: title,
                        detail: detail,
                        inParam: inParam,
                        outParam: outParam,
                        arr
                    }).then(function (response) {
                        console.log(response);
                    }).catch(function (error) {
                        console.log(error);
                        showNormal("发送出错");
                    });
                }
            }, 1000)
            arr = []
            this.$refs.previewDom.clear()
        },
        deleteTodo(id) {
            request.post('/deleteTodo', {
                id: id,
            }).then(function (response) {
                console.log(response);
            }).catch(function (error) {
                showNormal("删除出错");
            });
        },
        done(id) {
            request.post('/done', {
                id: id,
            }).then(function (response) {
                console.log(response);
            }).catch(function (error) {
                showNormal("完成出错");
            });
        },
        confirmDone(id) {
            request.post('/confirmDone', {
                id: id,
            }).then(function (response) {
                console.log(response);
            }).catch(function (error) {
                showNormal("确认完成出错");
            });
        }
    }
}
</script>

<style>
.picPaste {
    width: 100%;
    height: 130px;
    overflow-x: auto;
    display: flex;
    padding-top: 10px;
    padding-left: 10px;
    border: 1px solid blue;
}

.pic {
    width: 100px;
    height: 100px;
    overflow-x: auto;
    border: 1px solid darkslategray;
    margin-right: 10px;
}

.oneLine {
    height: auto;
}

.el-row {
    margin-top: 10px;
}

.devContainer {
    height: 100%;
    display: flex;
}

.chatLeft {
    height: 100%;
    width: 60%;
}

.chatRight {
    height: 100%;
    width: 40%;
    border-left: 1px solid forestgreen;
}

#app {
    height: 100%;
    font-family: Avenir, Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    color: #2c3e50;
}

html {
    height: 100%;
}

body {
    margin: 0px;
    height: 100%;
}
</style>
